<template>
  <div id='tmpl'>
    <!-- 1.0 mui实现图文列表功能 -->
    <ul class="mui-table-view">
      <li v-for="(item, index) in list" :key="index" class="mui-table-view-cell mui-media">
        <router-link v-bind="{to:'/news/newsinfo/'+item.id}">
          <img class="mui-media-object mui-pull-left" :src="item.img_url">
          <div class="mui-media-body">
            {{item.title}}
            <p class='mui-ellipsis' v-text="item.zhaiyao"></p>
            <div class="ft">
              <span>发表时间：{{item.add_time | datefmt('YYYY-MM-DD HH:mm:ss')}}</span>
              <span class="click">点击数：{{item.click}}</span>
            </div>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
import { Toast } from 'mint-ui';

export default {
  data() {
    return {
      list: []
    };
  },
  created() {
    this.getnewslist();
  },
  methods: {
    getnewslist() {
      var url = this.$common.apidomain + '/api/getnewslist';
      this.$http.get(url).then(function (res) {
        if (res.body.status != 0) {
          Toast(res.body.message);
          return;
        }
        this.list = res.body.message;
      });
    }
  }
}
</script>
<style lang="css" scoped>
.mui-table-view .mui-media-object {
  line-height: 80px;
  height: 80px;
  max-width: 80px;
}

.ft {
  font-size: 14px;
  color: #0094ff;
  margin-top: 1.5em;
}

.click {
  margin-left: 40px;
}
</style>